// <number> ------------------------------> font-size
// <color> -------------------------------> color
// (bolder, bold, lighter, weightnormal) -> font-weight
// (nowrap, wrapnormal) ------------------> white-space
// (left, center, right) -----------------> text-align
// (italic, stylenormal) -----------------> font-style
// (case, CASE, Case, transformnone) -----> text-transform
// (upline, deline, downline, noline) ----> text-decoration
.text(@rest...) {
    .text-util(@rest)
}

// <number> ----> 行数，超出几行现实省略号
.text-overflow(@number) {
    .text-overflow-util(@number)
}

// (auto, none, lo, ol) -----> flex
// (start, center, end, baseline, stretch) -----> self-align
.flex(@rest...) {
    .flex-self-util(@rest)
}

// (start, end, center, stretch) -------> align-items
// (row, rowreverse, col, colreverse) --> flex-direction
// (wrap, nowrap) ----------------------> flex-wrap
// (auto, none, lo, ol) ----------------> flex
.flex-start(@rest...) {
    .flex-util(start, @rest)
}

.flex-center(@rest...) {
    .flex-util(center, @rest)
}

.flex-end(@rest...) {
    .flex-util(end, @rest)
}

.flex-between(@rest...) {
    .flex-util(between, @rest)
}

.flex-around(@rest...) {
    .flex-util(around, @rest)
}

// (lt=tl, tr=rt, rb=br, bl=lb, left, top, right, bottom, center, fill) ---> top; right; bottom; left;
// <number>[, <number>[, <number>[, <number>]]] ---------------------------> top; right; bottom; left;
.relative(@rest...) {
    .position-util(relative, @rest)
}

.absolute(@rest...) {
    .position-util(absolute, @rest)
}

.fixed(@rest...) {
    .position-util(fixed, @rest)
}

.sticky(@rest...) {
    .position-util(sticky, @rest)
}

// <string> --------------------------------------------------------> background-image: url()
// (contain, cover) ------------------------------------------------> background-size
// (top, right, bottom, left, center, lt=tl, tr=rt, rb=br, bl=lb) --> background-position
// (repeat, repeatx, repeaty, norepeat) ----------------------------> background-repeat
// (border, padding, content) --------------------------------------> background-origin
// (scroll, fixed) -------------------------------------------------> background-attachment
.bgimg(@rest...) {
    .bgimg-util(@rest)
}

// <color> ---------------------> background-color
// (padding, content, border) --> background-clip
.bgcolor(@rest...) {
    .bgcolor-util(@rest)
}

// x ------> overflow-x
// y ------> overflow-y
// empty --> overflow
.overflow-hidden(@xy: '') {
    .overflow-util(@xy, hidden)
}

.overflow-scroll(@xy: '') {
    .overflow-util(@xy, scroll)
}

.overflow-auto(@xy: '') {
    .overflow-util(@xy, auto)
}

// <number>[, <number>[, <number>[, <number>]]] ------> border-radius
.radius(@rest...) {
    border-radius: @rest;
}

// <number>[, <number>] --------> translate()
.translate(@rest...) {
    .translate-util(@rest)
}

// <number>s ---------------> transition: all <number>s
.transition(@p) {
    transition: all @p;
}

// Utils
.text-util(@rest...) {
    each(range(length(@rest)), .(@v) {
            @i: extract(@rest, @v);
            if(isnumber(@i), e(%("font-size: %a;", @i)));
            if(iscolor(@i), e(%("color: %a;", @i)));
            if(@i=bolder or @i=bold or @i=lighter, e(%("font-weight: %a;", @i)));
            if(@i=weightnormal, e("font-weight: normal;"));
            if(@i=nowrap, e(%("white-space: %a;", @i)));
            if(@i=wrapnormal, e("white-space: normal;"));
            if(@i=left or @i=center or @i=right, e(%("text-align: %a;", @i)));
            if(@i=italic, e("font-style: italic;"));
            if(@i=stylenormal, e("font-style: normal;"));
            if(@i=case, e("text-transform: lowercase;"));
            if(@i=CASE, e("text-transform: uppercase;"));
            if(@i=Case, e("text-transform: capitalize;"));
            if(@i=transformnone, e("text-transform: none;"));
            if(@i=upline, e("text-decoration: overline;"));
            if(@i=deline, e("text-decoration: line-through;"));
            if(@i=downline, e("text-decoration: underline;"));
            if(@i=noline, e("text-decoration: none;"));
        })
}

.text-overflow-util(@number) {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: if(@number=1, nowrap, if(isnumber(@number) and @number>1, break-all));
    if(isnumber(@number) and @number>1, e(%('display: -webkit-box;-webkit-line-clamp: %a;-webkit-box-orient: vertical;', @number)))
}

.flex-util(@main, @rest...) {
    display: flex;
    if(@main=end, e(%("justify-content: flex-%a;", @main)));
    if(@main=center, e("justify-content: center;"));
    if(@main=between or @main=around, e(%("justify-content: space-%a;", @main)));

    each(range(length(@rest)), .(@v) {
            @i: extract(@rest, @v);
            if(@i=start or @i=end, e(%('align-items: flex-%a;', @i)));
            if(@i=center or @i=stretch or @i=baseline, e(%('align-items: %a;', @i)));
            if(@i=row, e(%('flex-direction: row;')));
            if(@i=rowreverse, e(%('flex-direction: row-reverse;')));
            if(@i=col, e(%('flex-direction: column;')));
            if(@i=colreverse, e(%('flex-direction: column-reverse;')));
            if(@i=wrap or @i=nowrap, e(%('flex-wrap: %a;', @i)));
            if(@i=auto or @i=none, e(%('flex: %a;', @i)));
            if(@i=lo, e('flex: 1 0 auto;'));
            if(@i=ol, e('flex: 0 1 auto;'));
        })
}

.flex-self-util(@rest...) {
    each(range(length(@rest)), .(@v) {
            @i: extract(@rest, @v);
            if(@i=auto or @i=none, e(%("flex: %a;", @i)));
            if(@i=lo, e("flex: 1 0 auto;"));
            if(@i=ol, e("flex: 0 1 auto;"));
            if(@i=start or @i=end, e(%("align-self: flex-%a;", @i)));
            if(@i=baseline or @i=stretch or @i=center, e(%("align-self: %a;", @i)));
        })
}

.position-util(@type, @rest...) {
    position: @type;
    @p: top, right, bottom, left;

    each(range(length(@rest)), .(@v) {
            @i: extract(@rest, @v);
            if(@i=lt or @i=tl, e("left: 0;top: 0;"));
            if(@i=tr or @i=rt, e("top: 0;right: 0;"));
            if(@i=rb or @i=br, e("right: 0;bottom: 0;"));
            if(@i=bl or @i=lb, e("bottom: 0;left: 0;"));
            if(@i=left, e("left: 0;top: 50%;transform: translateY(-50%);"));
            if(@i=top, e("top: 0;left: 50%;transform: translateX(-50%);"));
            if(@i=right, e("right: 0;top: 50%;transform: translateY(-50%);"));
            if(@i=bottom, e("bottom: 0;left: 50%;transform: translateX(-50%);"));
            if(@i=center, e("left: 50%;top: 50%;transform: translate(-50%, -50%);"));
            if(@i=fill, e("left: 0;top: 0;right: 0;bottom: 0;"));
            if(isnumber(@i), e(%("%a: %a;", extract(@p, @v), @i)))
        })
}

.bgimg-util(@rest...) {
    each(range(length(@rest)), .(@v) {
            @i: extract(@rest, @v);
            if(isstring(@i), e(%("background-image: url('%a');", @i)));
            if(@i=contain or @i=cover, e(%('background-size: %a;', @i)));
            if(@i=top or @i=right or @i=bottom or @i=left or @i=center, e(%('background-position: %a;', @i)));
            // if(@i=lt or @i=tl, e('background-position: left top;')); // 默认
            if(@i=tr or @i=rt, e('background-position: top right;'));
            if(@i=rb or @i=br, e('background-position: right bottom;'));
            if(@i=bl or @i=lb, e('background-position: bottom left;'));
            // if(@i=repeat, e('background-repeat: repeat;')); // 默认
            if(@i=repeatx, e('background-repeat: repeat-x;'));
            if(@i=repeaty, e('background-repeat: repeat-y;'));
            if(@i=norepeat, e('background-repeat: no-repeat;'));
            // if(@i=border or @i=content, e(%('background-origin: %a-box;', @i))); // @i=padding 默认值
            if(@i=padding or @i=content, e(%('background-clip: %a-box;', @i))) // @i=border 默认值
            if(@i=fixed, e(%('background-attachment: %a;', @i))); // @i=scroll 默认值
        })
}

.bgcolor-util(@rest...) {
    each(range(length(@rest)), .(@v) {
            @i: extract(@rest, @v);
            if(iscolor(@i), e(%('background-color: %a;', @i)));
            if(@i=padding or @i=content, e(%('background-clip: %a-box;', @i))) // @i=border 默认值
        })
}

.overflow-util(@xy, @type) {
    e(%('overflow%s: %a;', if(@xy=x or @xy=y, %('-%a', @xy), ''), @type))
}

.translate-util(@rest...) {
    @p: if(length(@rest)=1, @rest, if(length(@rest)=2, e(%('%a, %a', extract(@rest, 1), extract(@rest, 2)))));
    transform+_: translate(@p);
}